<template>
	<ul class="footer">
	  <li @click="toIndex">
		<i class="fa fa-home"></i>
		<p>首页</p>
	  </li>
	  <li @click="toMessage">
		<i class="fa fa-compass"></i>
		<p>消息</p>
	  </li>
	  <li @click="toOrderList">
		<i class="fa fa-file-text-o"></i>
		<p>订单</p>
	  </li>
	  <li @click="toLogin">
		<i class="fa fa-user-o"></i>
		<p>我的</p>
	  </li>
	</ul>
  </template>
  
  <script setup>
  import { useRouter } from "vue-router";
  
  const router = useRouter();
  
  const toIndex = () => {
	router.push({ path: "/index" });
  };
  
  const toMessage = () => {
	router.push({ path: "/message" });
  };
  
  const toOrderList = () => {
	router.push({ path: "/orderList" });
  };
  
  const toLogin = () => {
	router.push({ path: "/login" });
  };
  </script>
  
  <style scoped>
  .wrapper .footer {
	width: 100%;
	height: 14vw;
	border-top: solid 1px #ddd;
	background-color: #fff;
  
	position: fixed;
	left: 0;
	bottom: 0;
  
	display: flex;
	justify-content: space-around;
	align-items: center;
  }
  
  .wrapper .footer li {
	/*li本身的尺寸完全由内容撑起*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  
	color: #999;
	user-select: none;
	cursor: pointer;
  }
  
  .wrapper .footer li p {
	font-size: 2.8vw;
  }
  
  .wrapper .footer li i {
	font-size: 5vw;
  }
  </style>